<template>
  <div
    class="search-box"
    id="dp-search-box">
    <el-form
      label-width="100px"
      label-suffix=":"
      v-bind="formProps"
      @keydown.enter="$emit('submit')">
      <FieldCols
        :fields="fields"
        :data="data">
        <!-- $slots 传递给FieldCols -->
        <template
          v-for="(_, name) in $slots"
          #[name]="slotData">
          <slot
            :name="name"
            v-bind="slotData" />
        </template>
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          style="flex-grow: 1; max-width: unset; text-align: right">
          <el-button @click="$emit('reset')">重置</el-button>
          <el-button
            type="primary"
            @click="$emit('submit')">
            查询
          </el-button>
        </el-col>
      </FieldCols>
    </el-form>
  </div>
</template>

<script>
import FieldCols from './FieldCols';
export default {
  name: 'SearchBox',
  components: { FieldCols },
  props: { fields: Array, data: Object, formProps: Object },
  emits: ['reset', 'submit'],
};
</script>

<style lang="scss" scoped>
.search-box {
  padding: 24px;
  background-color: #fff;
  @include shadow;
}
</style>
